<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<script src="<%=path%>/js/jquery-3.2.1.js"></script>
<script>
	$(document).ready(function() {
		//判断用户两次密码是否输入一致
		$('#password2').blur(function() {
			if ($('#password1').val() !== $('#password2').val()) {
				$('#password_msg').html("两次输入密码不相同，请重新输入");
				$('#password_msg').css("display", "block");
			} else {
				$('#password_msg').css("display", "none");
			}
		});
		
		//AJAX判断用户是否已存在
		$('#username').blur(function () {
			$.ajax({
				type : "post",
				url : "<%=path%>/UserNameAJAX",
				data : {
					username: $("#username").val()
				},
				success : function(data, textStatus) {
					$("#username_msg").html(data);
				}
			});
		});
	});
</script>

</head>
<body>

	<form action="UserRegisterServlet" method="post">
		<label>用户名：</label>
		<input type="text" name="username" id="username" value="w">
		<div id="username_msg"></div>
		
		<label>密码：</label>
		<input type="password" name="password1" id="password1"><br>
		
		<label>再次输入密码：</label>
		<input type="password" name="password2" id="password2">
		<div id="password_msg" style="color: red;"></div>
		
		<input type="submit" value="注册">
	</form>

</body>
</html>